<template>
  <div>
    <van-nav-bar
      title="工作公告"
    />
    <!-- 主体内容区 -->
    <div class="content">
      <div class="title">
        {{ data.title }}
      </div>
      <div class="notice-info">
        <span style="color: #7A60FB">{{ data.type_dictText || '---' }}</span>
        <span class="notice-info-text">{{ data.createBy || '---' }}</span>
        <span class="notice-info-text">{{ data.createTime || '---' }}</span>
      </div>
      <div class="item-content" v-html="data.content" />
    </div>
    <van-overlay :show="show" @click="stop">
      <div class="wrapper" @click.stop>
        <van-loading type="spinner" />
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {getIncident} from '@/api/index'
export default {
  name: 'BaseInformation',
  data () {
    return {
      data: {},
      show: false,
    }
  },
  mounted: function() {
    // tab显示设置
    this.getIncident()
  },
  methods: {
    getIncident() {
      this.show = !this.show
      getIncident({
        id: '1388023620862967810',
        signedBy: '',
      }).then(res => {
        console.log(res)
        if (res.code === 200) {
          res.result.content = res.result.content.replace(/src="\/jeecg-boot/gi, `src="${window._CONFIG['domianURL']}`)
          this.data = res.result
        } else {
        }
      }).finally(() => {
        this.show = !this.show
      })
    },
    black() {
      this.$router.go(-1)
    },
    stop() {
      this.show = !this.show
    },
  },
}
</script>
<style lang="less" scoped>
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.content {
  width: 96%;
  margin-left: 2%;
  background: #fff;
  border-radius: 8px;
  margin-top: 8px;
}
.title {
  font-size: 18px;
  font-family: DIN-BlackItalic, DIN;
  font-weight: bold;
  color: #333333;
  padding: 22px 20px 0;
}
.notice-info {
  margin-bottom: 10px;
  font-size: 14px;
  padding: 11px 20px;
  border-bottom: 1px solid #E1E1E1;
}
.notice-info-text {
  color: #666666;
  margin-left: 10px
}
.item-content {
  padding: 22px 20px;
}
</style>
